import React from 'react';
import { Statistic } from 'antd';
import ProCard from '@ant-design/pro-card';
import styles from '../index.less';
import { connect } from 'umi';
import moment from 'moment';

const TitleCard = (props) => {
  const { item, currentUser, responsive } = props;

  return (
    item && (
      <ProCard.Group className={styles.itemCard} direction={responsive ? 'column' : 'row'}>
        <ProCard>
          <Statistic title="作品名称" value={item.name} />
        </ProCard>
        <ProCard.Divider type={responsive ? 'horizontal' : 'vertical'} />
        <ProCard>
          <Statistic
            title="当前所有者"
            value={item.owner.id === currentUser.id ? '自己' : item.owner.username}
          />
        </ProCard>
        <ProCard.Divider type={responsive ? 'horizontal' : 'vertical'} />
        <ProCard>
          <Statistic
            title="创建时间"
            value={moment.unix(item.trades[0].blockTime).format('YYYY-MM-DD HH:mm:ss')}
          />
        </ProCard>
      </ProCard.Group>
    )
  );
};

export default connect(({ item, user }) => ({
  currentUser: user.currentUser,
  responsive: item.responsive,
  item: item.item,
}))(TitleCard);
